<template>
	<div ref="chart" style="width:80vw;height:90vh;"></div>
</template>

<script>
	import Echart from '@/common/echart';
	import dark from '../../../echarts/dark.json';
	import request from '@/utils/request';
	import loadBMap from './map.js';
	import AMapJS from 'amap-js';
	require("echarts/extension/bmap/bmap");
	require("echarts/map/js/china.js");
	export default {
		components: {
			Echart
		},
		data() {
			return {
				// 创建AMapJSAPI Loader
				amapLoader: new AMapJS.AMapLoader({
					key: '7c8eb6da3874a5d06b625ac5c1296d41',
					version: '1.4.15',
					plugins: [],
				}),
				amapuiLoader: new AMapJS.AMapUILoader({
					version: '1.0'
				}),
				flyLine: [

					{
						coords: [
							[116.496437, 39.913523],
							[123.499706, 41.857793]
						]
					},

					{
						coords: [
							[116.496437, 39.913523],
							[86.113232, 43.684254]
						]
					},

					{
						coords: [
							[116.496437, 39.913523],
							[87.343701, 35.720308]
						]
					},

					{
						coords: [
							[116.496437, 39.913523],
							[101.406201, 24.177443]
						]
					},

					{
						coords: [
							[116.496437, 39.913523],
							[111.249951, 24.976714]
						]
					},

					{
						coords: [
							[116.496437, 39.913523],
							[107.206982, 33.843608]
						]
					},

					{
						coords: [
							[116.496437, 39.913523],
							[115.468701, 43.557002]
						]
					},

					{
						coords: [
							[116.496437, 39.913523],
							[107.031201, 37.134586]
						]
					},

					{
						coords: [
							[116.496437, 39.913523],
							[99.648388, 38.522914]
						]
					},

					{
						coords: [
							[116.496437, 39.913523],
							[124.081982, 49.361353]
						]
					},

				],
				goals: [
					[123.499706, 41.857793],
					[86.113232, 43.684254],
					[101.406201, 24.177443],
					[111.249951, 24.976714],
					[107.206982, 33.843608],
					[115.468701, 43.557002],
					[107.031201, 37.134586],
					[107.031201, 37.134586],
					[99.648388, 38.522914],
					[124.081982, 49.361353]

				],
				options: {
					darkMode: "auto",
					title: {
						text: '全国主要城市空气质量 - 百度地图',
						subtext: 'data from PM25.in',
						sublink: 'http://www.pm25.in',
						left: 'center'
					},
					tooltip: {
						trigger: 'item',
						show: false
					},
					animation: false,
					amap: {
						center: [104.114129, 37.550339],
						zoom: 4,
						roam: true,
						resizeEnable: true,
						mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214",
					},
					series: [{
							coordinateSystem: "amap", // 该系列使用的坐标系是高德地图的坐标系
							type: "lines", // 该类型用于地图上路线的绘制
							zlevel: 1, // 相当于z-index
							effect: { // 线特效的配置
								show: true, // 是否显示特效
								period: 5, // 特效动画的时间
								trailLength: 0.05, // 特效尾迹的长度 0-1
								color: "#3437ff", // 特效的颜色
								symbolSize: 5 // 特效的大小
							},
							lineStyle: { // 线的颜色
								normal: {
									color: "rgba(47,68,200,0.1)",
									width: 2,
									curveness: 0.2
								}
							},
							data: [],
						},
						{
							name: '目标点',
							type: "scatter",
							// 使用高德地图坐标系
							coordinateSystem: "amap",
							// 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
							data: [],
							symbolSize: 3,
							encode: {
								value: 2
							},
							label: {
								normal: {
									formatter: '{b}',
									position: 'right',
									show: false
								},
								emphasis: {
									show: true
								}
							},
							itemStyle: {
								normal: {
									color: 'rgba(98,122,200,0.78)'
								}
							}
						},
					]
				},


			}
		},
		methods: {
			getReuestData() {
				let _this = this;
				request({
					url: '/magic-api/system/hardwareInfo',
					method: 'post',
				}).then(response => {
					if (response.data.cpuInfo) {
						var total = response.data.cpuInfo.toTal;
						var available = response.data.cpuInfo.used;
						var rate = (available / total * 100).toFixed(2)
						_this.options.series[0].data[0].value = rate;
						_this.options.series[0].data[0].name = "CPU";
					}
					_this.drawChart();
				})
			},
			drawChart() {
				let echart = this.$echarts.init(this.$refs.chart, "dark");
				echart.setOption(this.options);
			},
			convertData(data) {
				var res = [];
				for (var i = 0; i < data.length; i++) {
					var geoCoord = this.geoCoordMap[data[i].name];
					if (geoCoord) {
						res.push({
							name: data[i].name,
							value: geoCoord.concat(data[i].value)
						});
					}
				}
				return res;
			}
		},
		mounted() {
			// this.getReuestData();
			// this.getReuestData();
			let defaultTheme = require('../../../echarts/default.json');
			this.$echarts.registerTheme('dark', defaultTheme.theme);
			// setTimeout(this.getReuestData(),1000);
			let _this = this;
			_this.options.series[0].data = _this.convertData(_this.cityValues);
			loadBMap("7c8eb6da3874a5d06b625ac5c1296d41")
				.then(() => {
					// 配置option
					_this.drawChart()
				})


			// setTimeout(function()  {
			// 	debugger
			//

			//    }, 4000);

		}
	}
</script>

<style>
</style>
